<!DOCTYPE html>
<html>
<head>
    <title>Ping Pong Game</title>
    <style>
        body {
				background-image:url('js/textures/skybox/background.jpg');}
        #gameCanvas {
            width: 640px;
            height: 360px;
            margin: auto;
        }
        #scoreboard {
            text-align: center;
            font-family: Segoe UI, Helvetica, Ubuntu, sans-serif;
            color: white;
        }
        #scores{
            font-size: 300%;
            padding: 0;
            margin: 0;
            color: red;
        }
        #title{
            background-color: white;
            color: black;
        }
    </style>
</head>
<body onload="setup();">
    <script src="src/three.min.js"></script>
    <script src="js/keyboard.js"></script>
	<script src="js/Sound.js"></script>
    <script src="js/game.js"></script>
    <script src="js/raphael-min.js"></script>
    <script src="js/helvetica.js"></script>

    <div id="scoreboard">
        <h1 id="scores">Space to play!</h1>
        <h1 id="title">Cube Slam</h1>
    </div>
	<div id="gameBoard" >
        <canvas id="detailCanvas" style="width:300px;float:left;" ></canvas>
        <div id="gameCanvas" style="display: none" />
	</div>

    <div>
        <div id="logo" style="position: fixed;width:1360px;height:200px;top:150px;text-align: center;vertical-align:middle">
              <img src="js/textures/png.png" style="height:  100px"/>
        </div>

        <div id="loseMenu" style="position: fixed;width:1360px;height:400px;background-color:whitesmoke;top:400px;text-align: center; display: none">
            <button onclick="backgameClick()" style="color:white; width:200px;height: 50px; background-image:url('js/textures/btn.png');margin-right: 50px;margin-top: 100px">BACK TO MENU!</button>
            <button onclick="replayClick()" style="color:white; width:200px;height: 50px; background-image:url('js/textures/btn.png');margin-top: 100px ">REPLAY!</button>
        </div>

        <div id="menu" style="position: fixed;width:1360px;height:200px;top:400px;text-align: center">
            <button onclick="newgameClick();" style="color:white; width:200px;height: 50px; background-image:url('js/textures/btn.png');margin-right: 50px ">PLAY NEW GAME!</button>
            <button style="color:white; width:200px;height: 50px; background-image:url('js/textures/btn.png'); ">SOUND ON/OFF</button>
        </div>
    </div>
</body>
</html>